<template>
	<div
		ref="itemRef"
		:style="{
			flex: sizes?.[curIndex] || 1,
			position: 'relative',
			overflow: 'hidden',
			[isVertical ? 'paddingBottom' : 'paddingRight']: `${gap / 2}px`,
			[isVertical ? 'marginBottom' : 'marginRight']: `${gap / 2}px`,
			...style,
		}"
	>
		<slot></slot>
		<hanlder
			:index="curIndex"
			v-if="curIndex > -1 && curIndex < sizes.length - 1"
		/>
	</div>
</template>
<script lang="ts" setup>
import { inject, ref, computed, PropType, CSSProperties } from "vue";
import { IResizerProps } from "./types";
import hanlder from "./handler.vue";
defineProps({
	style: {
		type: Object as PropType<CSSProperties>,
		default: {},
	},
});
const { sizes, containerRef, direction, gap } =
	inject<IResizerProps>("vue_resizer");
const isVertical = computed(() => direction === "column");
const itemRef = ref<HTMLElement>();
const curIndex = computed(() => {
	if (containerRef.value) {
		const children = containerRef.value?.children;
		const index = Array.from(children).indexOf(itemRef.value);
		return index;
	}
	return -1;
});
</script>
